<template>
    <van-cell class="product-info">
        <img :src="sku?.image">
        <div>
            <p class="show-in-two-lines title" style="-webkit-line-clamp: 1">{{sku?.sku}}</p>
            <p class="price" v-text="sku?.price"></p>
            <p class="store">库存：{{sku?.stock}}</p>
        </div>
    </van-cell>
    <van-cell class="spec" v-for="(attr, attrIndex) in productAttr" :key="attr.id">
        <p class="name" v-text="attr.attr_name"></p>
        <p>
            <span
                    v-for="(attrValue, valueIndex) in attr.attr_value"
                    :key="attrValue.attr"
                    v-text="attrValue.attr"
                    :class="{tag: true, active: (skuIndexSelected[attrIndex] || 0) === valueIndex}"
                    @click="changeSku(attrIndex, valueIndex)"
            ></span>
        </p>
    </van-cell>
    <van-cell title="数量">
        <template #right-icon>
            <van-stepper v-model="cartNum" :max="sku?.stock"/>
        </template>
    </van-cell>
</template>

<script setup>
  import { ref, defineProps, computed, defineEmits } from 'vue'

  const { productData } = defineProps({
    productData: {
      type: Object,
      required: true,
    }
  })

  // 属性 及其 可选值
  const productAttr = computed(() => productData.productAttr)
  const productValue = computed(() => productData.productValue)

  // 各项属性 被选中的项的 索引
  const skuIndexSelected = ref([]);

  const changeSku = (attrIndex, valueIndex) => {
    skuIndexSelected.value[attrIndex] = valueIndex
  }

  const skuType = computed(() => {
    const values = []
    for (let i = 0; i < productAttr.value?.length || 0; i++) {
      const attr_values = productAttr.value?.[i].attr_values
      const index = skuIndexSelected.value[i] || 0
      values.push(attr_values[index])
    }
    const _skuType = values.join(",")
    emit('changeSkuType', { skuType: _skuType, sku: productValue.value[_skuType] })
    return _skuType
  })

  const emit = defineEmits(['changeSkuType', 'changeCartNum'])
  const sku = computed(() => {
    return productValue.value[skuType.value]
  })

  // 加入购物车数量
  let num = 0;
  const cartNum = computed({
    get() {
      return num
    },
    set(value) {
      num = value
      emit('changeCartNum', value)
    }
  })
</script>

<style lang="scss" scoped>
    img {
        width: 75px;
        height: 75px;
    }

    .product-info :deep(.van-cell__value) {
        display: flex;
    }

    .title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .price {
        font-size: 16px;
        color: #F2270C;
    }

    .store {
        font-size: 12px;
        color: #999;
    }

    .spec {
        .name {
            padding: 5px 0;
            font-size: 16px;
        }

        .tag {
            border: 1px solid #CCC;
            display: inline-block;
            padding: 0 12px;
            margin-right: 10px;
            border-radius: 20px;
            background: #F2F2F2;

            &.active {
                color: #F2270C;
                border: 1px solid #F2270C;
                background: #FCEDEB;
            }
        }
    }
</style>
